<template>
    <section>
         <el-row :gutter="20">
             <el-col  :md="24">
            <div class="grid-content bg-purple"> 
            <div class="dev-title">组织详情</div>
            </div>
                <div style="padding:12px 15px;height: 300px;" class="col-bg clearfix">
                    <el-col :span="12">
                        <div class="device_img"> <img 
                                :src="imgUrl?imgUrl:require('../../../assets/1554284055.jpg')"></div>

                    </el-col>
                    <el-col :span="12">
                        <div class="device_p">
                            <div class="device_title">
                                <h2 class="ng-binding">{{detailList.name}}</h2>
                            </div>
                            <p class="ng-binding"><label class="ng-binding">电话号码：{{detailList.phone}}</label></p>
                            <p class="ng-binding"><label class="ng-binding">地址：{{detailList.address}}</label></p>
                            <p class="ng-binding"><label class="ng-binding">网址：{{detailList.site}}</label></p>
                            <!-- <p class="ng-binding"><label class="ng-binding">厂商：</label>{{facility.companyName}}</p> -->
                            <p class="ng-binding"><label class="ng-binding">备注:{{detailList.remark}}</label>
                            </p>
                            <!-- <p class="ng-binding"><label class="ng-binding">在线状态：</label></p> -->
                            <!-- <p class="ng-binding"><label class="ng-binding">设备地址：</label>{{facility.deviceLocation.city}}</p> -->
                        </div>
                    </el-col>
                </div>
             </el-col>
             <el-col  :md="24">
                <h2 class="userlists">用户列表</h2>
               
                <el-table :data="userlist" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
                        <!-- <el-table-column type="selection">
                        </el-table-column> -->
                        <el-table-column type="index" label="序号"  width="80" :index="indexMethod">
                        </el-table-column>
                        <el-table-column prop="userName" label="用户名">
                        </el-table-column>
                        <el-table-column prop="nickName" label="昵称">
                        </el-table-column>                        
                        <el-table-column prop="email" label="邮箱">
                        </el-table-column>
                        <el-table-column prop="phone" label="电话号码">
                        </el-table-column>
                        <el-table-column prop="createTime" label="时间">
                        </el-table-column>
                        <el-table-column align="center" label="操作">
                            <template scope="scope">
                                <i @click="handleEdit(scope.$index, scope.row)"  title="编辑" icon="el-icon-edit" circle class="pb-icon icon-edit"></i>
                                <i @click="handleDel(scope.$index, scope.row)" icon="el-icon-delete" circle title="删除" class="pb-icon icon-delete"></i>

                            </template>
                        </el-table-column>
                  </el-table>              
             </el-col>
         </el-row> 

          <!--编辑界面-->
        <el-dialog title="编辑" v-show="editFormVisible" v-model="editFormVisible" @close="editFormVisible=false">
            <div slot="footer" style="text-align: left; ">
                <el-form :model="editForm" label-width="80px"  ref="editForm">
                    <el-form-item label="用户名" prop="">
                        <el-input v-model="editForm.userName" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" prop="">
                        <el-input v-model="editForm.nickName" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="">
                        <el-input v-model="editForm.email"  auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码" prop="">
                        <el-input type="number" v-model="editForm.phone"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:right;">
                    <el-button @click.native="editFormVisible = false">取消</el-button>
                    <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
                </div>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import {
        company_get,
        user_query,
        user_edit_child,
        user_get_childr,
        user_delete_child,
    } from '../../../api/api';
export default{
    data(){
        return{
            detailList:'',//组织信息
            imgUrl:'',//展示组织logo
            page:1,
            // type:"",
            companyId:'',//组织id
            userlist:'',
            listLoading: false,//加载中
            editFormVisible:false,//展示编辑框
            editForm:{
                childUserId:'',
                userName:'',
                nickName:'',
                email:'',
                phone:'',
                dataRestrict:''
            },//编辑界面数据
        }
    },
    methods:{
        indexMethod(index) {
                let num = (this.page - 1) * 10 + index + 1;
                return num;
            },
        getCompany(){
             let para = {
                    companyId: sessionStorage.getItem('company_detail')
                };
            company_get(para).then((res) => {
                this.detailList = res.data
                this.imgUrl = res.data.logo              
                // this.type = res.data.type
                this.companyId = res.data.companyId
                this.getUsers()
                console.log(this.detailList)
            })
        },
        handleEdit:function(index,row) {
            this.editFormVisible = true
            
            let para = {
                childUserId:row.userId
            }
            user_get_childr(para).then((res) => {
                this.begCode (res.code);
                if (res.code == 0) {
                    this.editForm = {
                        childUserId:res.data.childUserId,
                        userName:res.data.userName,
                        nickName:res.data.nickName,
                        email:res.data.email,
                        phone:res.data.phone,
                        dataRestrict: res.data.dataRestrict
                        }
                }
                // console.log(res.data)
            })
        },
        handleDel:function(index,row) {
            this.$confirm('确认删除吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                   
                    let para = {
                        childUserId: row.userId
                    };
                //    console.log(row)
                   console.log(para)
                   user_delete_child(para).then((res) => {
                       this.listLoading = false;
                       this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        this.getUsers();
                   })
                }).catch(() => {

                });
        },//删除
        editSubmit: function() {
            this.listLoading = true

            let para = this.editForm
            user_edit_child(para).then((res) => {
                this.listLoading = false
                this.begCode(res.code, res.message);
                 if (res.code == 0) {
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        });
                        this.$refs['editForm'].resetFields();
                        this.editFormVisible = false;
                        this.getUsers();

                    } else {
                        this.$message({
                            message: res.message,
                            type: 'warning'
                        });
                                }
                console.log(res)
            })

        },
         getUsers() {
                let para = {
                    pageNo: 1,
                    pageSize: 9999,
                    // type: this.type,
                    companyId: this.companyId,
                    dataRestrict:this.dataRestrict
                };
                console.log(para)
                //NProgress.start();
                user_query(para).then((res) => {
                    this.begCode(res.code,res.message);
                   this.userlist = res.data.list
                   console.log(res)
                });
                
            },
        selsChange: function (sels) {
            this.sels = sels;
        },
    },
    mounted(){
        this.getCompany()  
    }
}
</script>

<style scoped>
    .device_title{
        border-bottom: 1px solid #ccc;
        margin-bottom: 5px;
    }
    .device_title .ng-binding{
        font-weight: bold;
        font-size: 20px;
    }
    .device_img{
        width: 300px;
        height: 300px;
        margin: 0 auto;
    }
    .device_img img{
        max-width: 100%;
        max-height: 100%;  
    } 
    .userlists{
        font-weight: bold;
    }
</style>